.is-show-action {
  .layout-content {
    margin-bottom: 0;
  }
}

.embed-header{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  h1{
    width: 60px;
    height: 60px;
    position: absolute;
    top: 0;
    right: 20px;
    text-indent: -9999px;
    z-index: 11;
    margin: 0 0 0 15px;
    @include retina-image('logo-new.png','logo-new@2x.png');
    @include transition(all 0.25s linear);
    &.active{
      opacity: 0;
      visibility: hidden;
    }
    a{
      display: block;
      height: 100%;
      width: 100%;
    }
  }
}


.country {
  float: left;
  margin: 0 0 -1px -1px;
  font-size: 15px;
  line-height: 18px;
  text-align: center;
  color: #999;
  width: 100%;

  @media (min-width: 480px){
    width: 50%;
  }
  @media (min-width: 768px){
    width: 33.333333%;
  }
  @media (min-width: 1000px){
    width: 25%;
  }
  @media (min-width: 1600px){
    width: 20%;
  }




  a {
    position: relative;
    display: block;
    // max-width: 240px;
    width: 100%;
    height: 240px;
    padding: 20px;
    border: 1px solid #E5E5E5;
    background: #fff;
    @include transition(all 0.1s $easeInOutCubic);

    .country_main,
    .country_alt {
      @include transition(all 0.1s $easeInOutCubic);
    }

    &:hover {
      z-index: 1000;
      @include box-shadow(0 0 1px rgba(#000, .1));

      .country_main,
      .country_alt {
        fill: $cGreen;
      }
      @media (min-width: 480px){
        @include transform(scale(1.1));
      }
    }
  }

  .country-content {
    position: absolute;
    top: 190px; left: 20px;
    right: 20px;

    span {
      display: block;
      color: #999;
      font-size: 15px;
      line-height: 1.1;
    }
  }

  h3 {
    display: block;
    margin-bottom: 5px;
    font-size: 19px;
    line-height: 1.1;
    color: #555;
    text-transform: uppercase;
    padding: 0;
    &.small {
      font-size: 19px;
    }
  }

  strong {
    font-weight: 500;
  }

  svg {
    position: absolute;
    top: 20px; left: 50%;
    margin-left: -75px;
    fill: #555;
  }
}
.title-section {
  font-size: 35px;
  padding: 85px 20px 15px;
  text-transform: lowercase;
  color: #555;
  &:first-letter {
    text-transform: uppercase;
  }
  .embed & {
    padding: 15px 20px 15px;
    text-align: left;
  }
  @media (min-width: 480px){
    padding: 40px 0 15px;
    text-align: center;
  }
  @media (min-width: $br-mobile){
    font-size: 47px;
    display: block;
  }

}
.countries-list-title{
  padding: 0 20px;
  @media (min-width: $br-mobile){
    text-align: center;
    display: block;
  }
  h3 {
    font-size: 20px;
    text-transform: lowercase;
    color: #555;
    @media (min-width: $br-mobile){
      font-size: 25px;
    }
    &:first-letter {
      text-transform: uppercase;
    }
    a{
      color: $cGreen;
      &:hover{
        color: darken($cGreen, 5%);
      }
    }
  }
}



@media only screen and (max-width: 480px) {
  .interesting .section-title {
    font-size: 28px;
  }
}
